<template>
  <div class="watermark">
    <div class="list-form">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="我的主图水印" name="1" />
        <el-tab-pane label="投放商品列表" name="2" />
        <el-tab-pane label="系统水印模板" name="3" />
        <el-tab-pane label="我收藏的模板" name="4" />
      </el-tabs>
      <main-watermark v-show="activeName === '1'" />
      <goos-list v-show="activeName === '2'" />
      <system-temp v-show="activeName === '3'" />
      <my-temp v-show="activeName === '4'" />
    </div>
  </div>
</template>

<script>
import GoosList from './components/goos-list.vue'
import MainWatermark from './components/main-watermark.vue'
import MyTemp from './components/my-temp.vue'
import SystemTemp from './components/system-temp.vue'

export default {
  name: 'Watermark',
  components: {
    MainWatermark,
    GoosList,
    SystemTemp,
    MyTemp
  },
  data() {
    return {
      activeName: '1'
    }
  }
}
</script>

<style lang="scss" scoped>
.watermark {
  padding: 12px 20px 0;
  .list-form,
  .list-table {
    padding: 20px 20px 0;
    border-radius: 4px 4px 0 0;
  }
}
</style>
